<template>
  <div>
    <el-form ref="queryRef" :inline="true">
      <el-form-item label="输入规则名称" prop="ruleName">
        <el-input placeholder="请输入内容" clearable />
      </el-form-item>
      <el-form-item label="规则状态" prop="ruleType">
        <el-select placeholder="请选择" popper-class="changeSelect" clearable>
          <el-option
            v-for="(item, index) in ['启用', '停用']"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="错误级别" prop="errorType">
        <el-select placeholder="请选择" popper-class="changeSelect" clearable>
          <el-option
            v-for="(item, index) in ['错误', '警告']"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <div class="box_content_button">
        <div v-if="isOpen" class="open-btn-style">
          <el-button @click="unfoldAdaption">
            <span class="title">收起</span>
            <el-icon class="arrow-down" color="#0D867F" :size="16"
              ><DArrowLeft
            /></el-icon>
          </el-button>
        </div>
        <div v-if="!isOpen" class="open-btn-style">
          <el-button @click="unfoldAdaption">
            <span class="title">展开</span>
            <el-icon class="arrow-down" color="#0D867F" :size="16"
              ><DArrowRight
            /></el-icon>
          </el-button>
        </div>
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </div>
      <div v-if="isOpen">
        <el-form-item label="是否强制执行" prop="isEnforcement">
          <el-select placeholder="请选择" popper-class="changeSelect" clearable>
            <el-option
              v-for="(item, index) in ['是', '否']"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </div>
      <div v-if="isOpen">
        <el-form-item label="是否强制执行" prop="isEnforcement">
          <el-select placeholder="请选择" popper-class="changeSelect" clearable>
            <el-option
              v-for="(item, index) in ['是', '否']"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

defineProps<{ msg: string }>();

const count = ref(0);
const isOpen = ref(false);
const unfoldAdaption = () => {
  isOpen.value = !isOpen.value;
};
</script>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
:deep(.el-form) {
  display: grid;
  column-gap: 20px;
  row-gap: 10px;
  // grid-template-columns: repeat(4, auto);
  grid-template-columns: repeat(4, 377px);
  justify-content: space-between;
  grid-template-areas:
    "a b c d"
    "e f g h";
  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    .el-input__wrapper {
      width: 259px;
    }
  }
}

.box_content_button {
  grid-area: d;
  display: flex;
  justify-content: flex-end;

  align-items: center;
  &:deep(.el-button) {
    width: 104px;
    height: 32px;
  }
  .open-btn-style {
    display: inline-block;
    ::v-deep(.el-button) {
      width: 49px;
      height: 32px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #e5e5e5;
      margin-right: 10px;
      .title {
        font-size: 12px;
        font-family: "思源黑体";
        font-weight: 400;
        color: #666666;
        line-height: 14px;
      }
    }
  }
}
</style>
